<template>
	<view class="full-screen-bg">
		
		<view class="topTitle">
			慧通海纳
		</view>
		
		<view class="loginContent">
			<img style="width: 210rpx;height: 210rpx;" src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/su.png"/>
		</view>
		
		
		<view class="loginContent">
			<button class="btn"  @click="appOpenidLogin">一键登录</button>
		</view>
		<view class="loginContent">
			<button class="btn" open-type="getPhoneNumber"  @getphonenumber="mobileLogin">微信授权登录</button>
		</view>
		
		<view class="bottomTitle">
			湖南海纳技工学校
		</view>
	</view>
</template>

<script>
import login from "../../api/modules/index.js"
import { setLoginUserStorage } from "../../js/storage.js";

export default {
	name: 'login',
	
	methods: {
		appOpenidLogin() {
			uni.login({
				provider: 'weixin',
				success: function (loginRes) {
					if (loginRes.errMsg !== 'login:ok') {
						return;
					}
					console.log(loginRes)
					login.loginByOpenId(loginRes.code).then((res) => {
						if(res.data) {
							setLoginUserStorage(res);
							uni.reLaunch({
								url: "./index"
							})
						}
					}).catch(error => {
						console.error('登录失败！:', error)
						uni.showToast({
						  title: '请先微信授权！',
						  icon: "error"
						})
					})
			}})
		},
		mobileLogin(e) {
			if (e.detail.errMsg !== 'getPhoneNumber:ok') {
				return;
			}
			
			uni.login({
				provider: 'weixin',
				success: function (loginRes) {
					if (loginRes.errMsg !== 'login:ok') {
						return;
					}
					
					login.loginByPhone(loginRes.code,e.detail.code).then(res=> {
						console.log("登录成功:",res);
						setLoginUserStorage(res);
						uni.reLaunch({
							url: './index'
						})
					}).catch(error => {
						console.error('登录失败！:', error)
						uni.showToast({
						  title: '登录异常',
						  icon: "none"
						})
					})
				}
			})
		}
	}
}
</script>

<style lang="scss">
	.full-screen-bg {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #0100cc;
		
		.topTitle {
			color: white;
			font-size: 60rpx;
			display: flex;
			justify-content: center;
			margin-top: 200rpx;
		}
		
		.loginContent {
			display: flex;
			justify-content: center;
			margin-top:100rpx;
			
			.btn {
				background: white;
				color: #0000FF;
				font-size: 36rpx;
				border-radius: 20rpx;
				border: #0000FF solid 3rpx;
				font-weight: bolder;
				width: 70%;
			}
		}
		
		.bottomTitle {
			color: white;
			font-size: 60rpx;
			display: flex;
			justify-content: center;
			position: absolute;
			bottom: 50px;
			width: 100%;
		}
		
	}
</style>